﻿import { Component, OnInit ,ViewChild,ElementRef} from '@angular/core';
import { Router } from '@angular/router';
import { ApiService } from '../../services/app.service.api';
import { Movies } from './../../model/movies';
import { Genres } from './../../model/genres';

@Component({
    selector: 'home',
    templateUrl: './app/components/home/home.component.html'
})
export class HomeComponent implements OnInit {
    loadingMovies: boolean = true;
    loadingGenres: boolean = true;
    isReadOnly: boolean = true;
    latestMovies: Movies[];
    genres: Genres[];
    testing: string = 'wdengke';
    private url4Movies: string = '/api/movies/latest';
    private url4Genres: string = '/api/genres';
    @ViewChild('genresbar') genresbar;
    constructor(private apiService: ApiService) { }
    loadData() {
        this.apiService.get(this.url4Movies, {}, result => {
            console.log('home get movies :' + result.json());
            this.latestMovies = result.json() as Movies[];
            this.loadingMovies = false;
        }, error => {
            console.log('home get movies fail:'+error);
            });
        this.apiService.get(this.url4Genres, {}, result => {
            this.genres = result.json() as Genres[];
            console.log(this.genres);
            this.loadingGenres = false;
        }, error => {
        });
    }

    ngOnInit() {
        this.loadData();
    }

    //ngAfterViewInit() {
    //    Morris.Bar({
    //        element: this.genresbar,
    //        data: this.genres,
    //        xkey: "Name",
    //        ykeys: ["NumberOfMovies"],
    //        labels: ["Number Of Movies"],
    //        barRatio: 0.4,
    //        xLabelAngle: 55,
    //        hideHover: "auto",
    //        resize: 'true'
    //    });
    //}


}

